<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Share GPT</title>
    <link rel="stylesheet" href="popup.css" />
    <script src="popup.js"></script>
  </head>
  <body class="body">
    <div id="loading-div" class="container">
      <div class="loader"></div>
    </div>
    <div id="login-div" class="container">
      <img src="/assets/icons/icon48.png" alt="Share GPT" />
      <h1 class="title">Login to ShareGPT</h1>
      <form
        action="https://sharegpt.com/api/auth/signin/google"
        target="_blank"
        method="POST"
      >
        <input id="csrfToken-google" type="hidden" name="csrfToken" />
        <button type="submit" class="button">
          <img src="/assets/chrome.svg" alt="Google" />
          <span>Log in with Google</span>
        </button>
      </form>
      <form
        action="https://sharegpt.com/api/auth/signin/twitter"
        target="_blank"
        method="POST"
      >
        <input id="csrfToken-twitter" type="hidden" name="csrfToken" />
        <button class="button">
          <img src="/assets/twitter.svg" alt="Twitter" />
          <span>Log in with Twitter</span>
        </button>
      </form>
    </div>
    <div id="session-div" class="container">
      <img id="session-image" alt="User Profile Pic" class="profile-pic" />
      <h1 id="session-name" class="title"></h1>
      <p class="subtitle">
        You are logged in as <span id="session-username"></span>
      </p>
    </div>
  </body>
</html>
